<template>
    <div class="wrap">
        <div class="button" @click="materialClick">
            <div ref="shadow" class="shadow" ></div>
        </div>
    </div>
</template>
<style scoped>
.wrap {
  align-items: center;
  justify-content: center;
}
.button {
  width: 200px;
  height: 100px;
  background-color: #89e289;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.shadow {
  width: 10px;
  height: 10px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  background-color: #89e289;
}
</style>
<script>
var animation = weex.requireModule("animation");
export default {
  data() {
    return {
    };
  },
  methods: {
    materialClick() {
      var vm = this;
      var shadow = vm.$refs.shadow;
      animation.transition(
        shadow,
        {
          styles: {
            opacity: "0",
            backgroundColor: "#74aa74",
            transform: "scale(30)",
            transformOrigin: "center center"
          },
          duration: 1000,
          timingFunction: "ease",
          delay: 0
        },
        function() {
          animation.transition(
            shadow,
            {
              styles: {
                backgroundColor: "#89e289",
                transform: "scale(1)",
                transformOrigin: "center center"
              },
              duration: 20,
              timingFunction: "ease",
              delay: 0
            },
            function() {
              animation.transition(shadow, {
                styles: {
                    opacity: '1'
                },
                duration: 20,
                timingFunction: "ease",
                delay: 0
              });
            }
          );
        }
      );
    }
  }
};
</script>
